<template>
  <div class="payment-container">
    
    <!-- 订单信息 -->
    <div class="order-info">
      <h2>订单信息</h2>
      <div class="items-list">
        <div v-for="item in cartStore.items" :key="item.id" class="item">
          <img :src="`http://localhost:3005/${item.image}`" :alt="item.title">
          <div class="item-info">
            <h3>{{ item.title }}</h3>
            <p class="item-price">¥{{ item.price.toFixed(1) }} × {{ item.quantity }}</p>
          </div>
          <div class="item-total">¥{{ (item.price * item.quantity).toFixed(1) }}</div>
        </div>
      </div>
    </div>

    <!-- 支付信息 -->
    <div class="payment-info">
      <div class="total-amount">
        <span>应付金额：</span>
        <span class="price">¥{{ cartStore.totalAmount.toFixed(1) }}</span>
      </div>
      
      <!-- 支付方式选择 -->
      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <div class="method-options">
          <div 
            v-for="method in paymentMethods" 
            :key="method.id"
            class="method-item"
            :class="{ active: selectedMethod === method.id }"
            @click="selectedMethod = method.id"
          >
            <img :src="method.icon" :alt="method.name">
            <span>{{ method.name }}</span>
          </div>
        </div>
      </div>

      <!-- 支付按钮 -->
      <button class="pay-button" @click="handlePayment">立即支付</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCartStore } from '../../stores/cart'
import { useRouter } from 'vue-router'

const cartStore = useCartStore()
const router = useRouter()
const selectedMethod = ref('alipay')

// 支付方式列表
const paymentMethods = [
  { id: 'alipay', name: '支付宝支付', icon: '/src/assets/R-C.png' },
  { id: 'wechat', name: '微信支付', icon: '/src/assets/wx.jpg' },
  { id: 'card', name: '银行卡支付', icon: '/src/assets/yxk.jpg' }
]

// 在页面加载时恢复未完成的订单数据
onMounted(() => {
  const unfinishedOrder = localStorage.getItem('unfinishedOrder')
  if (unfinishedOrder) {
    const orderData = JSON.parse(unfinishedOrder)
    selectedMethod.value = orderData.paymentMethod
  }
})

// 处理支付
const handlePayment = () => {
  // 获取未完成的订单数据
  const unfinishedOrder = localStorage.getItem('unfinishedOrder')
  const orderInfo = unfinishedOrder ? JSON.parse(unfinishedOrder) : {
    items: cartStore.items,
    totalAmount: cartStore.totalAmount,
    paymentMethod: selectedMethod.value,
    orderTime: new Date().toISOString()
  }

  // 更新支付方式
  orderInfo.paymentMethod = selectedMethod.value

  // 清除未完成订单数据
  localStorage.removeItem('unfinishedOrder')
  
  // 清空购物车数据
  cartStore.clearCart()

  // 跳转到完成页面
  router.push({
    path: '/shopping/over',
    query: {
      orderInfo: JSON.stringify(orderInfo)
    }
  })
}
</script>

<style scoped>
.payment-container {
  padding: 20px 20px 70px;
  max-width: 800px;
  margin: 0 auto;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

.payment-info {
  margin-top: auto;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(74, 55, 40, 0.08);
}

.pay-button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 24px;
  background: #8b5e3c;
  color: white;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #4a3728;
  margin-bottom: 30px;
}

.order-info {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(74, 55, 40, 0.08);
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.item img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.item-info {
  flex: 1;
  margin-left: 15px;
}

.item-info h3 {
  margin: 0;
  color: #4a3728;
  font-size: 16px;
}

.item-price {
  color: #8b5e3c;
  margin: 5px 0 0;
}

.item-total {
  color: #8b5e3c;
  font-weight: bold;
}

.payment-info {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(74, 55, 40, 0.08);
}

.total-amount {
  text-align: right;
  font-size: 20px;
  margin-bottom: 30px;
}

.price {
  color: #8b5e3c;
  font-weight: bold;
  margin-left: 10px;
}

.payment-methods {
  margin-bottom: 30px;
}

.method-options {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.method-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-item.active {
  border-color: #8b5e3c;
  background: #fff6f0;
}

.method-item img {
  width: 24px;
  height: 24px;
}

.pay-button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 24px;
  background: #8b5e3c;
  color: white;
  font-size: 18px;
  
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pay-button:hover {
  background: #4a3728;
  transform: translateY(-2px);
}
</style>